<template>
    <div class="manage1">
        <el-form :inline="true" class="manage1_from1">
            <el-form-item label=""></el-form-item>
            <el-form-item label="手机号：">
                <el-input v-model="param.mobile" placeholder="手机号" clearable class="manage1_from1_input1" />
            </el-form-item>


            <el-form-item label="注册日期：">
                <el-date-picker v-model="param.startTime" type="date" class="manage1_from1_time1" placeholder="开始时间"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /> &nbsp; 至 &nbsp;
                <el-date-picker v-model="param.endTime" type="date" class="manage1_from1_time1" placeholder="结束时间"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable />
            </el-form-item> <br />

            <!-- 
           <el-form-item label="id：">
               <el-input v-model="param.userId" placeholder="id" clearable class="manage1_from1_input1" />
           </el-form-item> -->


            <el-form-item label="姓名：">
                <el-input v-model="param.nickname" placeholder="姓名" clearable class="manage1_from1_input1" />
            </el-form-item>


            <!-- <el-form-item label="状态：">
               <el-select v-model="param.status" @change="schoolCge" placeholder="审核中,已通过,已拒绝" clearable
                          class="manage1_from1_select1">
                    <el-option key="1" label="审核中" value="1" />
                    <el-option key="2" label="已通过" value="2" />
                    <el-option key="3" label="已拒绝" value="3" />
               </el-select>
           </el-form-item> -->

            <el-form-item label="性别：">
                <el-select v-model="param.sex" @change="schoolCge" placeholder="男,女" clearable
                    class="manage1_from1_select1">
                    <el-option key="1" label="男" value="1" />
                    <el-option key="2" label="女" value="2" />
                </el-select>
            </el-form-item>


            <!-- <el-form-item label="年龄：">
               <el-input v-model="param.age" placeholder="年龄" clearable class="manage1_from1_input1" />
           </el-form-item> -->
            <el-form-item label="参赛年龄：">
                <el-select v-model="param.age" @change="schoolCge" placeholder="青少年,成年" clearable
                    class="manage1_from1_select1">
                    <el-option key="1" label="青少年" :value=1 />
                    <el-option key="2" label="成年" :value=2 />
                </el-select>
            </el-form-item>
            <el-form-item label="球种：">
                <el-select v-model="param.ballSeed" @change="schoolCge" placeholder="足球,篮球,曲棍球,排球,羽毛球,乒乓球,网球,橄榄球,其他"
                    clearable class="manage1_from1_select1">
                    <el-option key="1" label="足球" value="足球" />
                    <el-option key="2" label="篮球" value="篮球" />
                    <el-option key="3" label="曲棍球" value="曲棍球" />
                    <el-option key="4" label="排球" value="排球" />
                    <el-option key="5" label="羽毛球" value="羽毛球" />
                    <el-option key="6" label="乒乓球" value="乒乓球" />
                    <el-option key="7" label="网球" value="网球" />
                    <el-option key="8" label="橄榄球" value="橄榄球" />
                    <el-option key="9" label="其他" value="其他" />
                </el-select>
            </el-form-item>

            <el-form-item label="身份证号：">
                <el-input v-model="param.idCard" placeholder="身份证号" clearable class="manage1_from1_input1" />
            </el-form-item>
            <el-form-item label="城市：">
                <el-input v-model="param.city" placeholder="城市" clearable class="manage1_from1_input1" />
            </el-form-item>
            <el-form-item label="是否自由球员：">
                <el-select v-model="param.types" @change="schoolCge" placeholder="是,否" clearable
                    class="manage1_from1_select1">
                    <el-option key="4" label="是" value="4" />
                    <el-option key="3" label="否" value="3" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" class="manage1_from1_button1" @click="getList(1)">搜索</el-button>
                <el-button @click="rewrite" text type="primary">
                    <el-icon :size="16">
                        <refresh />
                    </el-icon> &nbsp;重置筛选条件
                </el-button>
                &emsp;
                <el-button @click="exportList" type="primary" class="w115">导出</el-button>


            </el-form-item>
        </el-form>
    </div>
    <el-tabs v-model="param.tablestatus" class="tab1" @tab-change="getList(1)">
        <!-- <el-tab-pane label="待审核" :name="1"> </el-tab-pane> -->


        <el-tab-pane label="已通过" :name="2"> </el-tab-pane>


    </el-tabs>
    <div class="list1" v-if="param.tablestatus == 1" v-loading="loading">

        <el-table ref="selectTable" :data="list1">
            <el-table-column prop="userId" min-width="120" label="id"></el-table-column>

            <el-table-column prop="mobile" min-width="120" label="手机号"></el-table-column>

            <el-table-column prop="nickname" min-width="120" label="姓名"></el-table-column>

            <el-table-column min-width="80" label="状态">
                <template #default="scope">
                    {{ status[scope.row.status] }}
                </template>
            </el-table-column>

            <!-- <el-table-column min-width="80" label="类型" >
                                <template #default="scope">
                                    {{types[scope.row.types]}}
                                </template>
                            </el-table-column> -->

            <el-table-column prop="createTime" min-width="120" label="注册时间"></el-table-column>

            <el-table-column min-width="80" label="性别">
                <template #default="scope">
                    {{ sex[scope.row.sex] }}
                </template>
            </el-table-column>

            <el-table-column prop="age" min-width="120" label="年龄"></el-table-column>
            <el-table-column prop="peopleType" min-width="120" label="参赛年龄"></el-table-column>

            <el-table-column prop="idCard" min-width="120" label="身份证号"></el-table-column>

            <el-table-column fixed="right" label="操作" min-width="200">
                <template #default="scope">
                    <div class="list1_operate1">
                        <el-button @click="tanchuang396lab0(scope.row, 2)" text type="primary">通过</el-button>
                        <el-divider class="list1_operate1_line1" direction="vertical" />
                        <el-button @click="tanchuang396lab1(scope.row, 4)" text type="primary">拒绝</el-button>
                        <el-divider class="list1_operate1_line1" direction="vertical" />
                        <el-button @click="$router.push('/qiuyuanxiangqing/' + scope.row.userId)" text
                            type="primary">详情</el-button>
                        <el-divider class="list1_operate1_line1" direction="vertical" />
                    </div>
                </template>
            </el-table-column>
        </el-table>


        <div class="list1_page1">
            <p class="list1_page1_title1">共 {{ total }} 条</p>
            <el-pagination v-model:currentPage="param.pageNumber" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :page-sizes="[10, 15, 20, 25]" :page-size="param.pageSize"
                layout=" sizes, prev , jumper , next" :total="total">
            </el-pagination>
        </div>
    </div>


    <div class="list1" v-if="param.tablestatus == 2" v-loading="loading">

        <el-table ref="selectTable" :data="list2">
            <el-table-column prop="userId" min-width="120" label="id"></el-table-column>
            <el-table-column prop="city" min-width="120" label="城市"></el-table-column>

            <el-table-column prop="ballSeed" min-width="120" label="球种"></el-table-column>

            <el-table-column prop="mobile" min-width="120" label="手机号"></el-table-column>

            <el-table-column prop="nickname" min-width="120" label="姓名"></el-table-column>

            <el-table-column min-width="80" label="状态">
                <template #default="scope">
                    {{ status[scope.row.status] }}
                </template>
            </el-table-column>

            <!-- <el-table-column min-width="80" label="类型" >
                                <template #default="scope">
                                    {{types[scope.row.types]}}
                                </template>
                            </el-table-column> -->

            <el-table-column prop="createTime" min-width="120" label="注册时间"></el-table-column>

            <el-table-column min-width="80" label="性别">
                <template #default="scope">
                    {{ sex[scope.row.sex] }}
                </template>
            </el-table-column>
            <el-table-column prop="teamName" min-width="120" label="球队名称"></el-table-column>
            <el-table-column prop="age" min-width="120" label="年龄"></el-table-column>
            <el-table-column prop="peopleType" min-width="120" label="参赛年龄"></el-table-column>
            <el-table-column prop="idCard" min-width="120" label="身份证号"></el-table-column>

            <el-table-column fixed="right" label="操作" min-width="200">
                <template #default="scope">
                    <div class="list1_operate1">
                        <el-button @click="$router.push('/qiuyuanxiangqing/' + scope.row.userId)" text
                            type="primary">详情</el-button>
                        <el-divider class="list1_operate1_line1" direction="vertical" />
                    </div>
                </template>
            </el-table-column>
        </el-table>


        <div class="list1_page1">
            <p class="list1_page1_title1">共 {{ total }} 条</p>
            <el-pagination v-model:currentPage="param.pageNumber" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :page-sizes="[10, 15, 20, 25]" :page-size="param.pageSize"
                layout=" sizes, prev , jumper , next" :total="total">
            </el-pagination>
        </div>
    </div>




</template>
<script>

export default {
    data() {
        return {
            list1: [],
            list2: [],
            param: {
                pageNumber: 1,
                pageSize: 10,
                tablestatus: 2,
            },
            loading: false,
            total: 0,
            sex: { 1: '男', 2: '女' },
            peopleTypes: { 1: '青少年', 2: '成年' },
            status: { 1: '信息填写完成未支付', 2: '已认证', 3: '审核中', 4: '审核失败' },
            types: { 1: '机构', 2: '协会', 3: '球队', 4: '自由球员', 5: '普通用户' },
        }
    },

    created() {
        this.getList()
    },

    mounted() {
    },

    components: {
    },

    methods: {
        rewrite() {
            let that = this;
            let obj = {
                pageNumber: that.param.pageNumber,
                pageSize: that.param.pageSize,
                tablestatus: that.param.tablestatus
            }
            that.param = obj;
        },
        // 导出
        exportList() {
            let that = this;
            that.param.pageSize=10000;
            // console.log(that.paramUse, 'use');
            that.$api.importBalluserlist(that.param).then(res => {
                // console.log(res,'res--------')
                if (res) {
                    const blob = new Blob([res], { type: 'application/octet-stream' }) // 构造一个blob对象来处理数据
                    if (window.navigator.msSaveOrOpenBlob) { //兼容IE10
                        navigator.msSaveBlob(blob, '球员列表')
                    } else {
                        const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
                        const a = document.createElement('a') //创建a标签
                        a.style.display = 'none'
                        a.href = href // 指定下载链接
                        a.download = '球员列表.xls' //指定下载文件名
                        a.click() //触发下载
                        URL.revokeObjectURL(a.href) //释放URL对象
                    }
                }
            })
        },


        tanchuang396lab0(val, status) {
            let that = this;
            this.$msgbox.confirm(
                " ",
                "您确认通过此用户吗",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                }
            ).then(() => {
                this.$api.audit({ authenticationId: val.authenticationId, authenticationId: status }).then(res => {
                    console.log(res);
                    if (res) {
                        that.getList();
                        that.$message.success(res.message);
                    }
                })
            }).catch(() => { });
        },


        tanchuang396lab1(val, status) {
            let that = this;
            this.$msgbox.confirm(
                " ",
                "您确认拒绝吗",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                }
            ).then(() => {
                this.$api.audit({ authenticationId: val.authenticationId, authenticationId: status }).then(res => {
                    console.log(res);
                    if (res) {
                        that.getList();
                        that.$message.success(res.message);
                    }
                })
            }).catch(() => { });
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.param.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.param.pageNumber = val;
            this.getList();
        },

        async getList(pageNumber) {
            this.loading = true;
            let res;
            if (pageNumber) {
                this.param.pageNumber = pageNumber;

            }
            if (this.param.tablestatus == 1) {
                this.param.status = 3;
                this.param.identity = 1;
                res = await this.$api.balluserlist(this.param);
            }
            console.log(this.param, "dsfdsfds---")
            if (this.param.tablestatus == 2) {
                this.param.status = 2;
                this.param.identity = 1;
                res = await this.$api.balluserlist(this.param);
            }
            console.log('res====', res)
            if (res) {
                let url = 'list' + this.param.tablestatus
                this[url] = res.records
                this.total = res.total;
            }
            this.loading = false;
        },


    }

}


</script>
<style lang="scss" scoped>
.manage1 {
    padding: 10px 20px 10px;
    background-color: #fff;
    text-align: left;

    .manage1_from1 {
        background: #F2F3F5;
        padding: 24px 16px 4px;
        text-align: left;

        .manage1_from1_input1 {
            width: 250px
        }

        .manage1_from1_input2 {
            width: 110px;
            margin-right: 10px;
        }

        .manage1_from1_input3 {
            width: 110px;
            margin-left: 10px;
        }

        .manage1_from1_select1 {
            width: 250px
        }

        .manage1_from1_time1 {
            width: 110px
        }

        .manage1_from1_button1 {
            width: 115px;
        }
    }

}

.tab1 {
    background-color: #fff;
    margin-top: 10px;
}

.list1 {
    background-color: #fff;

    .list1_head1 {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .list1_operate1 {
        width: 100%;
        display: flex;
        justify-content: center;

        .list1_operate1_line1 {
            margin: auto 10px;
        }
    }

    .list1_page1 {
        height: 70px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .list1_page1_title1 {
            font-size: 10px;
            color: #A4A4A4;
        }
    }
}
</style>